<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeHabit - 习惯养成应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        .badge-animation {
            animation: pop 0.5s ease-in-out;
        }
        @keyframes pop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        .habit-card {
            transition: all 0.3s ease;
        }
        .habit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 认证表单 -->
    <div id="authForm" class="fixed inset-0 flex items-center justify-center z-50">
        <div class="bg-white p-8 rounded-lg shadow-md w-96">
            <h1 class="text-2xl font-bold text-center mb-6">BeHabit</h1>
            <div class="space-y-4">
                <input type="email" id="email" placeholder="邮箱" class="w-full px-4 py-2 border rounded-lg">
                <input type="password" id="password" placeholder="密码" class="w-full px-4 py-2 border rounded-lg">
                <button onclick="login()" class="w-full bg-blue-500 text-white py-2 rounded-lg">登录</button>
                <button onclick="register()" class="w-full bg-gray-200 text-gray-700 py-2 rounded-lg">注册</button>
            </div>
        </div>
    </div>

    <!-- 主界面 -->
    <div id="mainApp" class="hidden">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-sm">
            <div class="max-w-6xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <i class="fas fa-seedling text-green-500 text-2xl mr-2"></i>
                        <span class="text-xl font-semibold">BeHabit</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div id="userInfo" class="flex items-center cursor-pointer" onclick="showUserCenter()">
                            <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
                                <span id="userInitial" class="text-green-600 font-medium"></span>
                            </div>
                            <span id="userEmail" class="text-sm text-gray-600 mr-4"></span>
                        </div>
                        <button onclick="logout()" class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <div class="max-w-6xl mx-auto px-4 py-8">
            <!-- 欢迎横幅 -->
            <div class="bg-gradient-to-r from-green-400 to-blue-500 rounded-xl p-6 mb-8 text-white">
                <h1 class="text-2xl font-bold mb-2">欢迎回来, <span id="welcomeName"></span>!</h1>
                <p class="opacity-90">"微小的改变带来巨大的不同。今天完成你的第一个小习惯吧!"</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧栏 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- 习惯列表 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-semibold">今日习惯</h2>
                            <button onclick="showAddHabitModal()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
                                <i class="fas fa-plus mr-2"></i> 添加习惯
                            </button>
                        </div>
                        <div id="habitsContainer" class="space-y-4">
                            <!-- 习惯列表将通过JavaScript动态生成 -->
                        </div>
                        
                        <!-- 分页控件 -->
                        <div id="paginationControls" class="mt-6 flex justify-between items-center hidden">
                            <div class="text-sm text-gray-500">
                                显示 <span id="pageStart">1</span>-<span id="pageEnd">10</span> 条，共 <span id="totalItems">0</span> 条
                            </div>
                            <div class="flex space-x-2">
                                <button id="prevPageBtn" class="px-3 py-1 bg-gray-100 rounded text-gray-600 text-sm disabled:opacity-50">上一页</button>
                                <div id="pageIndicator" class="px-3 py-1 bg-gray-100 rounded text-gray-600 text-sm">第 <span id="currentPage">1</span> 页</div>
                                <button id="nextPageBtn" class="px-3 py-1 bg-gray-100 rounded text-gray-600 text-sm disabled:opacity-50">下一页</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 进度统计 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-xl font-semibold mb-6">习惯进度</h2>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                            <div class="bg-blue-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-blue-600 mb-1">连续天数</p>
                                <p class="text-2xl font-bold text-blue-800" id="streakCount">0</p>
                            </div>
                            <div class="bg-green-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-green-600 mb-1">本月完成</p>
                                <p class="text-2xl font-bold text-green-800" id="monthlyCompletions">0</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-purple-600 mb-1">习惯总数</p>
                                <p class="text-2xl font-bold text-purple-800" id="totalHabits">0</p>
                            </div>
                            <div class="bg-yellow-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-yellow-600 mb-1">动机分数</p>
                                <p class="text-2xl font-bold text-yellow-800" id="motivationScore">0</p>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="progressChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧栏 -->
                <div class="space-y-6">
                    <!-- 动机评估 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-xl font-semibold mb-4">动机评估</h2>
                        <div class="mb-4">
                            <div class="flex justify-between mb-1">
                                <span class="text-sm font-medium text-gray-700">当前动机水平</span>
                                <span class="text-sm font-medium text-gray-700" id="motivationLevel">0/100</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-green-500 h-2.5 rounded-full" id="motivationBar" style="width: 0%"></div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mb-4" id="motivationMessage">开始评估你的动机水平</p>
                        <button onclick="assessMotivation()" class="w-full bg-blue-50 text-blue-600 py-2 rounded-lg text-sm font-medium">
                            刷新我的动机评估
                        </button>
                    </div>
                    
                    <!-- 成就徽章 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-xl font-semibold mb-4">成就徽章</h2>
                        <div class="grid grid-cols-3 gap-3" id="badgesContainer">
                            <!-- 徽章将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <!-- 为你推荐 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-xl font-semibold mb-4">为你推荐</h2>
                        <div class="space-y-3" id="recommendationsContainer">
                            <!-- 推荐将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <!-- 知识文章 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 mt-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-xl font-semibold">知识文章</h2>
                            <a href="#" onclick="showAllArticles(); return false;" class="text-sm text-blue-500 hover:text-blue-700">查看全部</a>
                        </div>
                        <div class="space-y-4" id="articlesContainer">
                            <!-- 文章将通过JavaScript动态生成 -->
                            <div class="text-center text-gray-500 py-2">
                                <i class="fas fa-spinner fa-spin mr-2"></i> 加载文章中...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加习惯模态框 -->
        <div id="addHabitModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-30">
            <div class="bg-white rounded-xl p-6 w-full max-w-md">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">添加新习惯</h3>
                    <button onclick="hideAddHabitModal()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="addHabitForm" class="space-y-4">
                    <div>
                        <label for="habitName" class="block text-sm font-medium text-gray-700 mb-1">习惯名称</label>
                        <input type="text" id="habitName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="例如: 喝一杯水">
                    </div>
                    <div>
                        <label for="habitDifficulty" class="block text-sm font-medium text-gray-700 mb-1">难度等级</label>
                        <select id="habitDifficulty" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                            <option value="1">非常简单</option>
                            <option value="2">简单</option>
                            <option value="3">中等</option>
                            <option value="4">较难</option>
                            <option value="5">困难</option>
                        </select>
                    </div>
                    <div>
                        <label for="habitTrigger" class="block text-sm font-medium text-gray-700 mb-1">触发方式</label>
                        <select id="habitTrigger" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" onchange="updateTriggerFields()">
                            <option value="time">时间提醒</option>
                            <option value="location">位置提醒</option>
                            <option value="activity">活动后提醒</option>
                        </select>
                    </div>
                    
                    <!-- 时间提醒字段 -->
                    <div id="timeTriggerFields">
                        <label for="habitTime" class="block text-sm font-medium text-gray-700 mb-1">提醒时间</label>
                        <input type="time" id="habitTime" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                    </div>
                    
                    <!-- 位置提醒字段 -->
                    <div id="locationTriggerFields" class="hidden">
                        <label for="habitLocation" class="block text-sm font-medium text-gray-700 mb-1">位置</label>
                        <input type="text" id="habitLocation" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="例如: 到家时">
                    </div>
                    
                    <!-- 活动提醒字段 -->
                    <div id="activityTriggerFields" class="hidden">
                        <label for="habitActivity" class="block text-sm font-medium text-gray-700 mb-1">活动</label>
                        <input type="text" id="habitActivity" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="例如: 吃完早餐后">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">选择图标</label>
                        <div class="grid grid-cols-5 gap-2">
                            <button type="button" class="icon-btn p-2 border rounded-lg hover:bg-gray-100 icon-selected" data-icon="glass-water" data-color="blue">
                                <i class="fas fa-glass-water text-blue-500"></i>
                            </button>
                            <button type="button" class="icon-btn p-2 border rounded-lg hover:bg-gray-100" data-icon="book" data-color="purple">
                                <i class="fas fa-book text-purple-500"></i>
                            </button>
                            <button type="button" class="icon-btn p-2 border rounded-lg hover:bg-gray-100" data-icon="running" data-color="yellow">
                                <i class="fas fa-running text-yellow-500"></i>
                            </button>
                            <button type="button" class="icon-btn p-2 border rounded-lg hover:bg-gray-100" data-icon="spa" data-color="green">
                                <i class="fas fa-spa text-green-500"></i>
                            </button>
                            <button type="button" class="icon-btn p-2 border rounded-lg hover:bg-gray-100" data-icon="mobile-alt" data-color="indigo">
                                <i class="fas fa-mobile-alt text-indigo-500"></i>
                            </button>
                        </div>
                        <input type="hidden" id="selectedIcon" value="glass-water">
                        <input type="hidden" id="selectedColor" value="blue">
                    </div>
                    
                    <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg font-medium">
                        添加习惯
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 完成习惯确认弹窗 -->
        <div id="completeHabitModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-30">
            <div class="bg-white rounded-xl p-6 w-full max-w-sm">
                <div class="text-center">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2" id="completeHabitName"></h3>
                    <p class="text-sm text-gray-500 mb-6">恭喜你完成了这个习惯!</p>
                    <div class="flex space-x-3">
                        <button id="cancelCompleteBtn" onclick="hideCompleteModal()" class="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg text-sm font-medium">
                            取消
                        </button>
                        <button id="confirmCompleteBtn" class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm font-medium">
                            确认完成
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 习惯完成记录弹窗 -->
        <div id="habitDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-30">
            <div class="bg-white rounded-xl p-6 w-full max-w-md max-h-[80vh] overflow-auto modal-content">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold" id="habitDetailsTitle"></h3>
                    <button onclick="hideHabitDetailsModal()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mb-4">
                    <div class="flex items-center mb-2">
                        <div id="habitDetailsIcon" class="h-10 w-10 rounded-full flex items-center justify-center mr-3">
                            <i class="fas"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500" id="habitDetailsTrigger"></p>
                            <p class="text-sm"><span class="text-gray-500">难度:</span> <span id="habitDetailsDifficulty"></span></p>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <h4 class="font-medium text-gray-800 mb-2">完成记录</h4>
                    <div id="habitCompletionsList" class="space-y-2 max-h-64 overflow-y-auto">
                        <!-- 完成记录将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="flex justify-end">
                    <button onclick="showCompleteModal(currentViewHabitId, document.getElementById('habitDetailsTitle').textContent)" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm">
                        标记完成
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 完成提示弹窗 -->
        <div id="completionToast" class="fixed top-6 right-6 bg-green-500 text-white p-4 rounded-lg shadow-lg opacity-0 -translate-x-20 transition-all duration-300 flex items-center z-40">
            <i class="fas fa-check-circle mr-2 text-xl"></i>
            <div>
                <h4 class="font-medium">习惯已完成！</h4>
                <p class="text-sm">坚持下去，好习惯正在形成。</p>
            </div>
        </div>
        
        <!-- 文章详情模态框 -->
        <div id="articleDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-30">
            <div class="bg-white rounded-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-auto modal-content">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold" id="articleTitle"></h3>
                    <button onclick="hideArticleDetailModal()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mb-3 text-gray-500 text-sm" id="articleMeta"></div>
                <div class="prose prose-lg max-w-none" id="articleContent">
                    <!-- 文章内容将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 所有文章列表模态框 -->
        <div id="allArticlesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-30">
            <div class="bg-white rounded-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-auto modal-content">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold">所有文章</h3>
                    <button onclick="hideAllArticlesModal()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="space-y-4" id="allArticlesContainer">
                    <!-- 文章列表将通过JavaScript动态生成 -->
                </div>
                <div id="articlesPagination" class="mt-6 flex justify-center space-x-2">
                    <!-- 分页控件将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/app.js"></script>
    <script>
        // 为所有模态框添加点击外部关闭功能
        document.addEventListener('DOMContentLoaded', function() {
            // 所有模态框ID列表
            const modalIds = [
                'habitDetailsModal',
                'articleDetailModal',
                'allArticlesModal'
            ];
            
            // 为每个模态框添加点击外部关闭事件
            modalIds.forEach(modalId => {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.addEventListener('click', function(e) {
                        // 如果点击的是模态框背景而不是内容
                        if (!e.target.closest('.modal-content') && e.target === this) {
                            // 根据不同模态框调用相应的关闭函数
                            if (modalId === 'habitDetailsModal') {
                                hideHabitDetailsModal();
                            } else if (modalId === 'articleDetailModal') {
                                hideArticleDetailModal();
                            } else if (modalId === 'allArticlesModal') {
                                hideAllArticlesModal();
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 